﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta http-equiv="Content-Script-Type" content="text/javascript" />
		<title>sample2</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
		<script type="text/javascript">
$(function(){
	
	$("#carouselInner").css("width",620*$("#carouselInner ul.column").size()+"px");
	$("#carouselInner ul.column:last").prependTo("#carouselInner");
	$("#carouselInner").css("margin-left","-620px");
	
	$("#carouselPrev").click(function(){
		$("#carouselNext,#carouselPrev").hide();
		$("#carouselInner").animate({
			marginLeft : parseInt($("#carouselInner").css("margin-left"))+620+"px"
		},"slow","swing" , 
		function(){
			$("#carouselInner").css("margin-left","-620px")
			$("#carouselInner ul.column:last").prependTo("#carouselInner");
			$("#carouselNext,#carouselPrev").show();
		});
	});
	
	$("#carouselNext").click(function(){
		$("#carouselNext,#carouselPrev").hide();
		$("#carouselInner").animate({
			marginLeft : parseInt($("#carouselInner").css("margin-left"))-620+"px"
		},"slow","swing" , 
		function(){
			$("#carouselInner").css("margin-left","-620px");
			$("#carouselInner ul.column:first").appendTo("#carouselInner");
			$("#carouselNext,#carouselPrev").show();
		});
	});
	
	var timerID = setInterval(function(){
		$("#carouselNext").click();
	},5000);
	
	$("#carouselPrev img,#carouselNext img").click(function(){
		clearInterval(timerID);
	});
	
});
		</script>
		<style type="text/css">
*{
	margin:0;
	padding:0;
}
#carouselWrap{
	margin:100px auto;
	width:620px;
	height:135px;
	padding:5px;
	background:url("./images/background.gif");
	position:relative;
}

#carouselPrev{
	position:absolute;
	top:65px;
	left:-8px;
	cursor:pointer;
}
#carouselNext{
	position:absolute;
	top:65px;
	right:-8px;
	cursor:pointer;
}
#carouse{
	width:100%;
	height:100%;
	overflow:hidden;
}

#carouselInner ul.column{
	width:605px;
	height:105px;
	padding:15px 0 15px 15px;
	list-style-type:none;
	float:left;
}
#carouselInner ul.column li{
	float:left;
	margin-right:10px;
	display:inline;
}
#carouselInner ul.column li img{
	border:none;
}
		</style>
	</head>
	<body>
	<body>
		<div id="carouselWrap">
			<p id="carouselPrev"><img src="./images/btn_prev.gif" alt="앞으로" /></p>
			<p id="carouselNext"><img src="./images/btn_next.gif" alt="뒤로" /></p>
			<div id="carouse">
				<div id="carouselInner">
					<ul class="column">
						<li><a href="#"><img src="./images/photo1_thum.jpg" alt="" /></a></li>
						<li><a href="#"><img src="./images/photo2_thum.jpg" alt="" /></a></li>
						<li><a href="#"><img src="./images/photo3_thum.jpg" alt="" /></a></li>
						<li><a href="#"><img src="./images/photo4_thum.jpg" alt="" /></a></li>
					</ul>
					<ul class="column">
						<li><a href="#"><img src="./images/photo5_thum.jpg" alt="" /></a></li>
						<li><a href="#"><img src="./images/photo6_thum.jpg" alt="" /></a></li>
						<li><a href="#"><img src="./images/photo7_thum.jpg" alt="" /></a></li>
						<li><a href="#"><img src="./images/photo8_thum.jpg" alt="" /></a></li>
					</ul>
					<ul class="column">
						<li><a href="#"><img src="./images/photo9_thum.jpg" alt="" /></a></li>
						<li><a href="#"><img src="./images/photo10_thum.jpg" alt="" /></a></li>
						<li><a href="#"><img src="./images/photo11_thum.jpg" alt="" /></a></li>
						<li><a href="#"><img src="./images/photo12_thum.jpg" alt="" /></a></li>
					</ul>
					<ul class="column">
						<li><a href="#"><img src="./images/photo13_thum.jpg" alt="" /></a></li>
						<li><a href="#"><img src="./images/photo14_thum.jpg" alt="" /></a></li>
						<li><a href="#"><img src="./images/photo15_thum.jpg" alt="" /></a></li>
						<li><a href="#"><img src="./images/photo16_thum.jpg" alt="" /></a></li>
					</ul>
				</div>
			</div>
		</div>
	</body>
	</body>
</html>